<template>
    <el-dialog
        title="请选择还原栏目"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="batch-push-content">
            <div class="select-content">
                <span>栏目：</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in columnList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="btns">
                <el-button @click="dialogVisible = false"> 取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
    // 组件名称
    name: "ViewNews",
    // 组件状态值
    data() {
        return {
            dialogVisible: false,
            value: '',
            row: {},
            columnList: []
        };
    },
    created() {
        
    },
    // 组件方法
    methods: {
        open({row = {}, columnList}) {
            this.dialogVisible = true;
            this.row = row;
            this.columnList = columnList;
        },
        handleClose() {
            this.dialogVisible = false;
            this.value = '';
        },
        handleConfirm() {
            if (!this.value) {
                this.$message.warning('请选择栏目');
                return;
            }
            this.$emit('confirmBack', { ...this.row, typeId: this.value, done: this.handleClose })
        }
    }
};
</script>
<style lang="scss" scoped>
    .batch-push-content {

        .select-content {
            display: flex;
            justify-content: start;
            align-items: center;
        }
        .btns {
            margin: 30px 0 20px;
        }
    }
</style>
